<template>
  <div>
    <div id="action_bar">
      <Button type="default" ghost class="common_button" @click="openAddDrawer">添加</Button>
      <Button type="default" ghost class="common_button" style="float: right">搜索</Button>
      <label>
        <Input v-model="keyword" placeholder="手机号" class="common_input"></Input>
      </label>
      <label>
        <Select v-model="status" placeholder="状态" class="common_select">
          <Option v-for="item in status_list" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
      </label>
    </div>
    <div id="content_bar">
      <Table v-model="merchantData" :columns="merchantColumns">
        <template slot-scope="{ row, index }" slot="action">
        </template>
      </Table>
      <div style="margin: 10px;overflow: hidden;margin-right: 0;">
        <div style="float: right;">
          <Page
            :total="pagination.total"
            :current="pagination.cuurent"
            :page-size="pagination.page_size"
            :show-total="pagination.show_total"
            @on-change="handleCurrentChange"
            v-if="pagination.total">
          </Page>
        </div>
      </div>
    </div>
    <Drawer :title="title" v-model="isOpen" width="500" :mask-closable="true">
      <Form :model="merchant" ref="shopForm" :label-width="80">
        <FormItem label="店铺类型" prop="type" label-width="100">
          <Select v-model="merchant.type" placeholder="选择店铺类型">
            <Option value="TB">淘宝</Option>
            <Option value="TM">天猫</Option>
            <Option value="JD">京东</Option>
            <Option value="PDD">拼多多</Option>
            <Option value="AL">阿里巴巴</Option>
          </Select>
        </FormItem>
        <FormItem label="店铺名称" prop="name" label-width="100">
          <Input v-model="merchant.name" placeholder="店铺名称"></Input>
        </FormItem>
        <FormItem label="店铺首页地址" prop="url" label-width="100">
          <Input v-model="merchant.url" placeholder="店铺首页地址"></Input>
        </FormItem>
        <FormItem label="街道地址" prop="address" label-width="100">
          <Input v-model="shop.address" placeholder="店铺首页地址"></Input>
        </FormItem>
        <FormItem label="发货电话" prop="phone" label-width="100">
          <Input v-model="shop.phone" placeholder="发货电话"></Input>
        </FormItem>
        <FormItem label="发货人" prop="people" label-width="100">
          <Input v-model="shop.people" placeholder="发货人"></Input>
        </FormItem>
        <div class="drawer-footer">
          <Button type="primary" @click="cleanDrawer('shopForm')"
                  style="margin-right: 8px;background-color: #c5c2c2;border-color: #fff;">取消
          </Button>
          <Button type="primary" @click="optionAction('shopForm')" class="sureButton"
                  style="background-color: #E91E63;border-color: #fff;">确定
          </Button>
        </div>
      </Form>
    </Drawer>
  </div>
</template>

<script>
import Table from '../../mixins/table'
import Drawer from '../../mixins/drawer'

export default {
  mixins: [Table, Drawer],
  name: 'shop',
  data() {
    return {
      keyword: '',
      status: 'A',
      status_list: [
        {value: 'A', label: '所有'},
        {value: '1', label: '启用'},
        {value: '0', label: '禁用'}
      ],
      merchantColumns: [
        {title: '手机号', key: 'phone'},
        {title: 'QQ号', key: 'qq'},
        {title: '状态', key: 'status'},
        {title: '操作', slot: 'action', width: 90, align: 'center'}
      ],
      merchantData: [],
      merchant: {name: '', type: '', phone: '', address: '', people: '', url: ''}
    }
  },
  mounted() {
    this.doGetPage();
  },
  watch: {
    "pagination.current": function () {
      this.doGetPage();
    },
    "state": function (val) {
      this.doGetPage();
    }
  },
  methods: {
    doGetPage() {

    },
    search() {
      this.doGetPage();
    },
    openAddDrawer() {
      this.shop = {};
      this.addDrawer("shopForm", "添加商户");
    }
  }
}
</script>
<style>

</style>
